<template>
  <div class="tinymce-editor">
    <div class="inner-editor">
      <Editor v-model="myContent" :init="init" ref="editorRef"></Editor>
    </div>

    <div class="tools" @click="saveContent">
      <div class="btn">
        <img class="img" :src="savePng" title="保存" />
        <span class="txt">保存</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import tinymce from 'tinymce/tinymce'
import savePng from '@/assets/images/save.png'
import 'tinymce/skins/ui/oxide/skin.css'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'
import 'tinymce/models/dom'
// 列表插件
import 'tinymce/plugins/accordion'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/link'
// import 'tinymce/plugins/autosave' // 定时自动将编辑内容保存到浏览器本地存储中（Local Storage）
import 'tinymce/plugins/autoresize' // 可拉伸宽度
import 'tinymce/plugins/charmap' // 特殊字符
import 'tinymce/plugins/code' // 查看源码
import 'tinymce/plugins/codesample' // 插入代码
import 'tinymce/plugins/directionality' // 文字方向
import 'tinymce/plugins/emoticons' // 表情符号
import 'tinymce/plugins/emoticons/js/emojis'
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/importcss' //引入自己定义的css文件
import 'tinymce/plugins/insertdatetime' //插入时间日期
import 'tinymce/plugins/nonbreaking' // 空格
import 'tinymce/plugins/pagebreak' //分页
import 'tinymce/plugins/preview' // 预览
// import 'tinymce/plugins/quickbars' // 快速工具栏
import 'tinymce/plugins/save' // 保存
import 'tinymce/plugins/searchreplace' //查询替换
// import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/visualblocks' // 块范围显示
import { ElMessage } from 'element-plus'

// 自动识别链接插件
import 'tinymce/plugins/autolink'
const editorRef = ref(null)
const props = defineProps({
  content: String
})
const tinymceEditor = ref(null)
const emit = defineEmits(['update:content'])
const myContent = ref('')
const init = ref({
  license_key: 'gpl',
  language_url: '/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  skin_url: '/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
  content_css: '/tinymce/skins/content/default/content.css',
  placeholder: '请输入内容',
  min_height: 458,
  height: 458,
  branding: false,
  promotion: false,
  menubar: false,
  image_caption: false,
  image_description: false,
  image_dimensions: false,
  link_title: false,
  media_alt_source: false,
  media_dimensions: false,
  target_list: [{ title: '新窗口', value: '_blank' }],
  content_style: '',
  images_upload_handler: async (blobInfo, success, failure) => {},
  resize: true,
  plugins:
    'accordion lists advlist  autolink link charmap wordcount  directionality emoticons fullscreen image importcss insertdatetime nonbreaking pagebreak preview searchreplace  visualblocks',
  toolbar: `blocks fontsize bold italic underline strikethrough forecolor backcolor lineheight alignleft alignright aligncenter alignjustify outdent indent  bullist numlist blockquote  link  image  emoticons hr pagebreak insertdatetime`,
  toolbar_mode: 'scrolling',
  statusbar: false,
  // contextmenu: 'fontsize bold italic underline strikethrough forecolor backcolor',
  contextmenu: 'copy paste cut link',
  contextmenu_never_use_native: true,
  setup: (editor) => {
    tinymceEditor.value = editor
  }
})
function saveContent() {
  console.log('保存成功')
  ElMessage.closeAll()
  if (myContent.value) {
    ElMessage({
      type: 'success',
      message: '保存成功'
    })
    return myContent.value
  } else {
    ElMessage({
      type: 'error',
      message: '内容不能为空'
    })
  }
}
function insertContent(content) {
  // console.log('editorRef.value:',editorRef.value)
  tinymceEditor.value.insertContent(content || '我是要插入的内容')
}
defineExpose({
  insertContent
})
onMounted(()=>{
  tinymce.init({})
})
</script>
<style lang="scss">
.tinymce-editor {
  .inner-editor {
    .tox .tox-tbtn--select {
      width: 80px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.tinymce-editor {
  width: 100%;
  height: 100%;
  .inner-editor {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 10px;
  }
}
.tools {
  padding-top: 10px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  .btn {
    background: #605ae5;
    border-radius: 14px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    .img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    .txt {
      color: #fff;
    }
  }
}
</style>
